﻿
@{
    ViewData["Title"] = "Index";
    Layout = "_OridinaryPage";
}

@section Header{
    <link rel="stylesheet" href="~/js/plugins/bootstrap-table/bootstrap-table.css" />
}

<section>
    <!--<h2>
        <small></small>
    </h2>-->
    <ol class="breadcrumb breadcrumb-pd clear-mgb bg-transparent">
        <li><a href="#"><i class="fa fa-dashboard"></i> 系统管理</a></li>
        <li class="active">厂商管理</li>
    </ol>
</section>
<!-- Main content -->
<section class="content-mini clear-pdt clear-pdb">
    <div class="row">
        <div class="col-xs-12">
            <div class="box  clear-mgb clearBoxTopBorder clearShadow">
                <!--<div class="box-header">
                    <h3 class="box-title"></h3>
                </div>-->
                <!-- /.box-header -->
                <div class="box-body clear-pd">
                    <div class="row searchCondition-pd">
                        <div class="col-xs-12">
                            <div class="box box-shadow-none" style="border-top:none;margin-bottom:0;">
                                <!--<div class="box-header">
                                    <h3 class="box-title"></h3>
                                </div>-->
                                <!-- /.box-header -->
                                <div class="box-body" style="padding:0 !important;">
                                    <form class="form-horizontal" id="allSubmitListForm">
                                        <div class="form-group">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-xs-12">
                                                        <div class="row">
                                                            <div class="col-xs-3">
                                                                <label for="IsOpen" class="col-xs-3 control-label  text-left pd-lft pd-rt">厂商编码</label>
                                                                <div class="col-xs-9 pd-lft">
                                                                    <input type="text" class="form-control" id="ManufacturerCode" name="ManufacturerCode" placeholder="厂商编码">
                                                                </div>
                                                            </div>
                                                            <div class="col-xs-3">
                                                                <label for="Type" class="col-xs-3 control-label  text-left pd-lft pd-rt">厂商名称</label>
                                                                <div class="col-xs-9 pd-lft">
                                                                    <input type="text" class="form-control" id="ManufacturerName" name="ManufacturerName" placeholder="厂商名称">
                                                                </div>
                                                            </div>
                                                            <div class="col-xs-3">
                                                                <label for="ExpireDate" class="col-xs-3 control-label  text-left pd-lft pd-rt">创建时间</label>
                                                                <div class="col-xs-9">
                                                                    <div class="row">
                                                                        <div class="col-xs-12  input-group">
                                                                            <input type="text" class="form-control Wdate Wdate-self col-xs-4 border-right-none" id="CreateDateStart" name="CreateDateStart" onFocus="WdatePicker({lang:'zh-cn',maxDate:'#F{\$dp.$D(\'CreateDateEnd\')}'})">
                                                                            <div class="input-group-addon border-left-none border-right-none">至</div>
                                                                            <input type="text" class="form-control Wdate Wdate-self col-xs-4 border-left-none" id="CreateDateEnd" name="CreateDateEnd" onFocus="WdatePicker({lang:'zh-cn',minDate:'#F{\$dp.$D(\'CreateDateStart\')}'})">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xs-3">
                                                                <label for="CheckMan" class="col-xs-3 control-label  text-left pd-lft pd-rt">创建人</label>
                                                                <div class="col-xs-9 pd-lft">
                                                                    <input type="text" class="form-control" id="Creator" name="Creator" placeholder="创建人">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-xs-12">
                                                        <div class="row">
                                                            <div class="col-xs-3">
                                                                <label for="IsOpen" class="col-xs-3 control-label  text-left pd-lft pd-rt">是否启用</label>
                                                                <div class="col-xs-9 pd-lft">
                                                                    <select class="form-control" id="IsActive" name="IsActive">
                                                                        <option value="">--请选择--</option>
                                                                        <option value="1">启用</option>
                                                                        <option value="0">不启用</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-xs-9">
                                                                <button type="button" class="btn btn-blue btnWidth120 boxShadowNone" id="btnSearch">查询</button>
                                                                <button type="button" class="btn btn-blue btnWidth120 boxShadowNone" id="btnAdd" data-toggle="modal" data-target="#addEditModal">新建</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                    <table id="dataInfos" class="table table-bordered table-hover"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
<!-- addEditModal---start -->
<div id="addEditModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="addEditModal">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加厂商</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="addEditForm">
                    <input type="hidden" class="clear" id="addEditId" name="Id" value="" />
                    <div class="form-group">
                        <label for="addEditManufacturerCode" class="col-sm-2 control-label">厂商编码</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control clear" id="addEditManufacturerCode" name="ManufacturerCode" placeholder="厂商编码" maxlength="50">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addEditManufacturerName" class="col-sm-2 control-label">厂商名称</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control clear" id="addEditManufacturerName" name="ManufacturerName" placeholder="厂商名称" maxlength="100">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addEditManufacturerType" class="col-sm-2 control-label">厂商类型</label>
                        <div class="col-sm-9">
                            @Html.DDLManufacturerType("ManufacturerType", new { @id = "addEditManufacturerType", @class = "form-control" })
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addEditManagerEmail" class="col-sm-2 control-label">负责人邮箱</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control clear" id="addEditManagerEmail" name="ManagerEmail" placeholder="负责人邮箱" maxlength="100">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addEditManagerPhone" class="col-sm-2 control-label">负责人电话</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control clear" id="addEditManagerPhone" name="ManagerPhone" placeholder="负责人电话" maxlength="50">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="addEditIsActive" class="col-sm-2 control-label">是否启用</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="addEditIsActive" name="IsActive">
                                <option value="1">启用</option>
                                <option value="0">不启用</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btnAddEditSubmit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $("#btnAddEditSubmit").click(function () {
        var id = $("#addEditId").val();
        var manufacturerCode = $("#addEditManufacturerCode").val();
        var manufacturerName = $("#addEditManufacturerName").val();
        var managerEmail = $("#addEditManagerEmail").val();
        var managerPhone = $("#addEditManagerPhone").val();
        if (IsNullOrEmpty(manufacturerCode)) {
            alert("请输入厂商编码！");
            $("#addEditManufacturerCode").focus();
            return;
        }
        if (IsNullOrEmpty(manufacturerName)) {
            alert("请输入厂商名称！");
            $("#addEditManufacturerName").focus();
            return;
        }
        if (IsNullOrEmpty(managerEmail)) {
            alert("请输入负责人邮箱！");
            $("#addEditManagerEmail").focus();
            return;
        }
        if (!ValidateEmail(managerEmail)) {
            alert("邮箱格式错误，请重新输入！");
            $("#addEditManagerEmail").focus();
            return;
        }
        if (IsNullOrEmpty(managerPhone)) {
            alert("请输入负责人电话！");
            $("#addEditManagerPhone").focus();
            return;
        }
        if (!ValidatePhone(managerPhone)) {
            alert("负责人电话格式错误，请重新输入！");
            $("#addEditManagerPhone").focus();
            return;
        }
        IndexBtnDisabled();
        $.ajax({
            type: "post",
            url: IsNullOrEmpty(id) ? "/Sys/Manufacturer_Info/Add" : "/Sys/Manufacturer_Info/Edit",
            data: $("#addEditForm").serialize(),
            dataType: "json",
            success: function (data) {
                if (data.Success) {
                    alert(data.Message);
                    $("#addEditModal").modal('hide');
                    $("#btnSearch").click();
                } else {
                    alert(data.Message);
                }
                IndexBtnEnabled();
            },
            error: function (err) { }
        });
    });
</script>
<!-- addEditModal---end -->

@section Scripts{
    <script src="~/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="~/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="~/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //1.初始化Table
            var oTable = new TableInit();
            oTable.Init();
        });

        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#dataInfos').bootstrapTable({
                    url: '/Sys/Manufacturer_Info/GetPageList',   //请求后台的URL（*）
                    method: 'get',                      //请求方式（*）
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true,                   //是否显示分页（*）
                    sortable: true,                     //是否启用排序
                    sortName: "CreateDate",             //排序字段
                    sortOrder: "desc",                  //排序方式
                    queryParams: oTableInit.queryParams,//传递参数（*）
                    sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1,                      //初始化加载第一页，默认第一页
                    pageSize: 15,                       //每页的记录行数（*）
                    pageList: [10, 15, 20, 30, 50],     //可供选择的每页的行数（*）
                    //search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    searchOnEnterKey: true,
                    strictSearch: true,
                    //showRefresh: true,                  //是否显示刷新按钮
                    //showColumns: true,                  //是否显示所有列按钮
                    //showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: true,                //是否启用点击选中行
                    //height: 811,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "Id",                 //每一行的唯一标识，一般为主键列
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                  //是否显示父子表
                    columns: [{
                        field: 'ManufacturerCode',
                        title: '厂商编码'
                    }, {
                        field: 'ManufacturerName',
                        title: '厂商名称'
                    }, {
                        field: 'ManufacturerType',
                        title: '厂商类型'
                    }, {
                        field: 'ManagerEmail',
                        title: '负责人邮箱'
                    }, {
                        field: 'ManagerPhone',
                        title: '负责人电话'
                    }, {
                        field: 'IsActive',
                        title: '是否启用',
                        formatter: function (value, row, index) {
                            return value == 1 ? "启用" : "不启用";
                        }
                    }, {
                        field: 'Creator',
                        title: '创建人'
                    }, {
                        field: 'CreateDate',
                        title: '创建时间',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return getFormatDate(value);
                        }
                    }, {
                        field: 'Id',
                        title: '操作',
                        formatter: 'operateFormatter'
                    }],
                    onLoadSuccess: function (res) {  //加载成功时执行
                        //console.info("加载成功");
                    },
                    onLoadError: function () {  //加载失败时执行
                        //console.info("加载数据失败");
                    }
                });
            };

            //得到查询的参数
            oTableInit.queryParams = function (params) {
                var temp = {   //这里键的名字和控制器的变量名必须一致，如有变动此处和控制器要一起改
                    rowsPerPage: params.limit, //每页数据行数
                    offsetRows: params.offset, //已偏移行数
                    sortName: params.sort,
                    sortOrder: params.order,
                    manufacturerCode: $("#ManufacturerCode").val(),
                    manufacturerName: $("#ManufacturerName").val(),
                    createDateStart: $("#CreateDateStart").val(),
                    createDateEnd: $("#CreateDateEnd").val(),
                    creator: $("#Creator").val(),
                    isActive: $("#IsActive :selected").val()
                    //search: params.search
                };
                return temp;
            };
            return oTableInit;
        };

        //格式化操作列的内容
        function operateFormatter(value, row, index) {
            var array = [];
            array.push("<a onclick='showEditModal(" + JSON.stringify(row) + ")' class='operateLink'><i class='fa fa-pencil-square-o' ></i>&nbsp;编辑</a>");
            return array.join('');
        }

        $("#btnSearch").click(function () {
            //重新加载
            $("#dataInfos").bootstrapTable('destroy');
            var tableInit = new TableInit();
            tableInit.Init();
        });

        $("#btnAdd").click(function () {
            $(".clear").val('');
            $("#addEditModal .modal-title").text('添加厂商');
            $("#addEditManufacturerCode").removeAttr("readonly");
        });
        
        function showEditModal(row)  {
            if (IsNullOrEmpty(row.Id)) {
                alert("数据异常，请联系管理员！");
                return;
            }
            $("#addEditModal .modal-title").text('编辑厂商');
            $("#addEditManufacturerCode").attr("readonly", "readonly");
            $("#addEditId").val(row.Id);
            $("#addEditManufacturerCode").val(row.ManufacturerCode);
            $("#addEditManufacturerName").val(row.ManufacturerName);
            $("#addEditManufacturerType").val(row.ManufacturerType);
            $("#addEditManagerEmail").val(row.ManagerEmail);
            $("#addEditManagerPhone").val(row.ManagerPhone);
            $("#addEditIsActive").val(row.IsActive);
            $("#addEditModal").modal('show');
        };
    </script>
}
